import React from "react"
import '../style/common.css'

import showImgI from '../ToolImg/showSearchImg.png'
import SelectImgI from '../ToolImg/person.png'

import SelectView from '../component/SelectView'

import selectPimg from '../ToolImg/selectPerson.png'
import pimg from '../ToolImg/personImg.png'
import {postFormData } from "../network/request"


class SelectType extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            selectStatus : false 
        }

        this.clickTypeAction = this.clickTypeAction.bind(this)
        this.clickWorkAction = this.clickWorkAction.bind(this)
    }


    clickTypeAction(){
        console.log("clickTypeAction")
        this.setState({
            selectStatus : true
        })
    }

    clickWorkAction(){
        console.log("clickWorkAction")
        this.setState({
            selectStatus : false
        })
    }

    clickSelectUserJobType(){
        // 获取用户UserId
        let userInfo = localStorage.getItem("initUser")
        let userJson = JSON.parse(userInfo);
        var userId = userJson["user_id"];

        const formData = new FormData();
         
         formData.append("userId", userId);

         if (this.state.selectStatus) {
             formData.append("selectType", "2");
         }else {
             formData.append("selectType", "1");
         }
 
         postFormData("/fetchUser", formData)
            .then(response => {
                if (response && response["success"] === true) {
                    // 更新本地存储的用户信息
                    userJson["selectType"] = this.state.selectStatus ? "2" : "1"
                    localStorage.setItem("initUser", JSON.stringify(userJson));
                    
                    this.props.onClick()
                }
             })
             .catch(error => {
                 console.error("数据提交失败:", error);
                 
             });       
    }


    render(){
        return(
            <div className="SelectTypeV">
                <img src={showImgI} className="showHeadImg"></img>

                <div className="SelectTitleV">
                    <img src={SelectImgI} className="SelectImgV"></img>
                    <p className="SelectTitleL">What are you looking for?</p>
                </div>

                <div className="selectPersonV">
                    <div style={{width: '20px'}}></div>
                    <SelectView title="I want a job" img={pimg} selectStat={!this.state.selectStatus} onClick={this.clickWorkAction}></SelectView>
                    <div style={{width: '10px'}}></div>
                    <SelectView title="I want an employee" img={selectPimg} selectStat={this.state.selectStatus} onClick={this.clickTypeAction}></SelectView>
                    <div style={{width: '20px'}}></div>
                </div>

                <div className="startQuestionBtn" onClick={this.clickSelectUserJobType.bind(this)}>
                    <p className="startL">Start</p>
                </div>
                
                <div className="selectBgV"></div>
            </div>
        )
    }
}

export default SelectType